<template>
  <NavBarVue title="进店逛逛
	"/>
  <view class="jind">
    <view class="main">
      <view class="tu">
        <image src='/static/图1.png'></image>
      </view>
      <view v-for="item in list" :key="item.id" class="asght">
        <view class="tex">
          <view class="left">
            <view>{{item.name}}</view>
            <view class="bt">收藏</view>
          </view>
          <view class="right" @click='goDetails'>
            <view class="phon">详情/电话</view>
            <view style="margin-top: 30rpx;">
              <u-icon name="arrow-right" color="#666" size="12"></u-icon>
            </view>
          </view>
        </view>
        <view style="font-size: 24rpx; color:#999" class="sc">{{item.name}}-商场</view>
        <view class="batw">
          <view class="yytime">
            <view style="display: flex;">
              <u-icon name="clock" color="#666" size="12"></u-icon>
              <view class="sj">营业时间 {{item.time}}</view>
            </view>
            <view>
              <u-icon name="arrow-right" color="#666" size="12"></u-icon>
            </view>
          </view>
          <view class="yytime">
            <view style="display: flex;">
              <u-icon name="clock" color="#666" size="12"></u-icon>
              <view class="sj">{{item.dz}}</view>
            </view>
            <view>
              <u-icon name="arrow-right" color="#666" size="12"></u-icon>
            </view>
          </view>
        </view>
      </view>
      <!-- Liebiao -->
      <view class="yle">
        <view class="ul">
          <view class="li" v-for="item in youlist" :key="item.id">
            <view class="ttop">
              <view style="font-size: 30rpx; font-weight: 600;">{{item.name}}</view>
              <view style="color:#999; font-size:28rpx">活动时间：{{item.times}}</view>
            </view>
            <view class="bott">
              <image :src="item.img"></image>
              <view>
                <view>{{item.to}}</view>
                <view>数量：{{item.too}}</view>
                <view>{{item.tooo}}</view>
              </view>
            </view>
            <view class="an">
              <view class="lq">领取优惠券</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {
  reactive
} from 'vue';
import NavBarVue from '../../../../components/NavBar.vue';

const list = reactive([{
  id: 0,
  name: "正弘城店",
  dz: "金水区花园路126号",
  time: "10:00-22:00"
},])

//游玩
const youlist = reactive([{
  id: 0,
  name: "彻夜畅玩场",
  times: "21:00-02:00",
  img: "/static/youle.png",
  to: "21:00至次日06:00内",
  too: "20",
  tooo: "康师傅系列6瓶+抽纸（可换百岁山，果粒橙）"
},
  {
    id: 1,
    name: "午间大包间",
    times: "13:00-15:00",
    img: "/static/youle2.png",
    to: "21:00至次日06:00内",
    too: "20",
    tooo: "康师傅系列3瓶+抽纸（可换百岁山，果粒橙）"
  },
  {
    id: 2,
    name: "暗夜畅玩场",
    times: "21:00-02:00",
    img: "/static/youle.png",
    to: "21:00至次日06:00内",
    too: "20",
    tooo: "康师傅系列5瓶+抽纸（可换百岁山，果粒橙）"
  },
])

// 跳转详情
const goDetails = () => {
  uni.navigateTo({
    url: '/pages/eventDetails/eventDetails'
  })
}
</script>

<style scoped lang="scss">
.jind {
  width: 100vw;
  height: calc(100vh - 80rpx);
  overflow: hidden;
  background: #f2f2f2;
}

.main {
  width: 100vw;
  height: calc(100vh - 80rpx);
  overflow: auto;
}

.login_top {
  margin-top: 30rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  background: white;

  .top_p {
    flex: 1;
    text-align: center;
    font-weight: bold;
  }
}

.tu {
}

.tu image {
  width: 100%;
  height: 380rpx;

}

.asght {
  width: 100%;
  height: auto;
  background: white;
  box-sizing: border-box;
  padding: 0rpx 20rpx;
}

.tex {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  display: flex;
  justify-content: space-between;
  font-size: 40rpx;
  color: #444;
  background: white;
  font-weight: 600;

  .left {
    display: flex;

    .bt {
      margin-top: 18rpx;
      margin-left: 20rpx;
      font-size: 24rpx;
      width: 120rpx;
      font-weight: 400;
      height: 48rpx;
      line-height: 48rpx;
      background: linear-gradient(270deg, #FB7685 0%, #FF4D65 100%);
      color: #fff;
      text-align: center;
      border-radius: 30rpx;
    }
  }

  .right {
    display: flex;

    .phon {
      font-size: 24rpx;
      color: #999;
    }
  }
}

.sj {
  margin-left: 10rpx;
  font-size: 24rpx;
}

.batw {
  margin-top: 40rpx;
}

.yytime {
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
  display: flex;
  justify-content: space-between;
  background: white;
}

.sc {
  width: 100%;
  height: 40rpx;
  background: white;
  margin-top: 10rpx;
}

.ttop {
  font-size: 28rpx;
  display: flex;
  justify-content: space-between;
  padding: 4rpx 0rpx;
}

.yle .ul .li {
  width: 100%;
  height: auto;
  background: white;
  margin-top: 18rpx;
  box-sizing: border-box;
  padding: 30rpx;
}

.bott {
  margin-top: 20rpx;
  width: 100%;
  height: auto;
  display: flex;
  font-size: 24rpx;
}

.bott image {
  width: 100rpx;
  height: 100rpx;
  border-radius: 10rpx;
  margin-right: 40rpx;
}

.an {
  display: flex;
  justify-content: flex-end;
}

.lq {
  margin-top: 30rpx;
  font-size: 24rpx;

  width: 170rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  background: linear-gradient(270deg, #FB7685 0%, #FF4D65 100%);
  color: white;
  border-radius: 30rpx;
}
</style>